@import '~@/assets/style/colorVar.scss';

.site-list {
  @include full-width-height;
  position: relative;
}

.page-footer-1 {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 32px;
  text-align: center;
  //background-color: #2a6d52;

  ::v-deep .el-pagination {
    button {
      background-color: transparent;
    }

    .el-pager li {
      background: transparent;
    }
  }
}

.edit-page-input {

  .edit-page-context {
    display: flex;

    .photo-albums {
      width: 400px;
    }

    .edit-page-context-data {
      flex: 1;

    }
  }

  ::v-deep .el-row {
    background: rgba(1, 96, 157, 0.00);
    box-shadow: inset 0 -1px 0 0 rgba(0, 69, 113, 0.83);

    //&:last-child {
    //  box-shadow: none;
    //}

    &.no-border {
      box-shadow: none;
    }

    .el-form-item {
      margin-bottom: 0px;
      padding: 6px 0;

      .el-form-item__content {
        color: #FFFFFF;
      }
    }
  }

  .jian-jie {


    .jian-jie-title {
      font-size: 15px;
      color: #5ED1FF;
    }

    .jian-jie-desc {
      color: #FFFFFF;
      line-height: 24px;
    }
  }
}

.tab-blue {
  height: 100%;
  width: 100%;
  position: relative;

  .tab-blue-header {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-shadow: rgba(0, 134, 215, 0.22) 0px 2px 2px 0px;


    .tab-blue-header-item {
      margin-right: 56px;
      color: #20608D;
      padding: 12px;

      &.active {
        border-bottom: 2px solid #419bf9;
        color: #05acff;
        background-image: radial-gradient(50% 0%, rgba(0, 163, 215, 0.85) 0%, rgba(0, 140, 215, 0.00) 100%);
      }

      &:last-child {
        margin-right: 0px;
      }
    }
  }

  .tab-blue-body {
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

.player-view-center {

  ::v-deep .card-panel-body {
    padding: 0;
  }
}


.video-control {
  background: #003868;
  width: 100%;
  height: 100%;
  position: relative;

  .video-control-header {
    background: #003C69;
    box-shadow: 0 1px 0 0 #025F93;
    width: 100%;
    height: 45px;
    line-height: 45px;
    display: flex;
    align-items: center;

    .video-control-header-item {
      text-align: center;
      width: 50%;
      color: #348ECD;
      cursor: pointer;

      &.active {
        color: #FFFFFF;
      }
    }
  }

  .video-control-body {
    position: absolute;
    top: 46px;
    bottom: 0px;
    width: 100%;
  }
}


.key-board {
  //display: flex;
  //flex-direction: column;
  width: 132px;
  height: 132px;
  position: relative;
  margin: 0 auto;

  .key-board-item {
    width: 93px;
    height: 93px;
    //width: 50%;
    //border: 1px solid red;
    position: absolute;
    display: flex;
    align-items: center;
    text-align: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
    z-index: 66;


    &.key-board-item-reset {
      width: 56px;
      height: 56px;
      border-radius: 100%;
      z-index: 70;
    }

    &.key-board-item-0 {
      left: 40px;
      top: 40px;
    }

    &.key-board-item-1 {
      left: 20px;
      top: -28px;
    }

    &.key-board-item-2 {
      right: -28px;;
      top: 23px;
    }

    &.key-board-item-3 {
      right: 20px;
      bottom: -28px;
    }

    &.key-board-item-4 {
      top: 23px;
      left: -28px;
    }
  }
}
